const path = require('path');
//dist中自动清理
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//删除.LICENSE.txt文件
const TerserPlugin = require('terser-webpack-plugin');
//css能生成到dist下的目录下的插件，插件还需new
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//html打包的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//webpack全局变量
const webpack = require('webpack');

//用于多页应用函数
var getHtmlConfig = function(name){
  return {
      template: './src/view/' + name +'.html',//要打包的原文件名
      filename: 'view/' + name +'.html',//打包后的文件名及路径
      inject: true,//注入，类似于ioc，aop概念
      hash: true,//维护项目，每改一次生成项目的版本号
      chunks: ['common',name],//入口，获取网页所需要用到的entry配置下的内容；加入‘common’后，‘common’的所有内容也被加载到所有界面，代替util提取公共部分
      minify: {//格式化
        collapseWhitespace: false
      }
  }
}
module.exports = {
  entry: {
    'common': ['./src/page/common/index.js'],
    'index': ['./src/page/index/index.js'],
    'login': ['./src/page/login/index.js'],
    'catalog-main': ['./src/page/catalog-main/index.js']
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  //配置端口和启动后部署的目录
  devServer: {
    port: 8889,
    contentBase: path.resolve(__dirname,'dist') //启动后部署的目录
  },
  //怎么加载的问题，处理css和图片
  module: {
    rules: [
      //处理css
      {
        test: /\.css$/,//处理的原文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader,//在dist中形成独立文件夹
            options: {
              publicPath: '../' //指定生成css的路径
            }
          },
          'css-loader']
      },
      //处理图片
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10,//文件大小限制，小于则用base64编码
            name: 'images/[name].[ext]',
            esModule: false //关闭es模块语法
         }
        }],
        type: 'javascript/auto'
      },
      //加载小的htm
      {
        test: /\.htm$/,
        use: {
          loader: 'html-loader',
          options: {
            esModule: false,
            minimize: false
          }
        }
      }
    ]
  },
  //插件
  plugins: [
    //new CleanWebpackPlugin(),//清空dist目录下内容
    //打包css，并在dist/css/目录下生成
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    //对每一页进行打包，同时可以获取对应的js，在js中引用要使用的css，css中引用要用的图片
    new HtmlWebpackPlugin(getHtmlConfig('index')),
    new HtmlWebpackPlugin(getHtmlConfig('login')),
    new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
    new webpack.HotModuleReplacementPlugin() //插件，热替换
  ],
  //优化，util公共模块的提取
  optimization: {
    minimize: false,
    minimizer: [
      new TerserPlugin({
        extractComments: false,//不将注释提取到单独的文件中
      })
    ],
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'util', //公共部分被打包后的文件名
          chunks: 'all',//入口，所有代码均被处理
          minChunks: 2, //至少同时被2个文件引用
          minSize: 0    //util的大小
        }
      }
    }
  },
  //别名
  resolve: {
    alias: {
      util: __dirname + '/src/util',
      page: __dirname + '/src/page',
      images: __dirname + '/src/images',
      service: __dirname + '/src/service',
      node_modules: __dirname + '/node_modules'
    }
  }
};